<template>
	<view class="detailsPage">
		<navBar title="详情页"></navBar>
		<!-- 详情页主体 -->
		<view class="details-body" v-if="currentBlog">
			<!-- 回复评论弹出层 -->
			<u-popup :show="isShow" @close="close" @open="open">
				<view class="reply-pop-box">
					<u-textarea v-model="replycontent" placeholder="不写点什么我打爆你狗头" :autoHeight="true" confirmType="done" @confirm="sendSonReply"></u-textarea>
				</view>
			</u-popup>
			<!-- 作者信息 -->
			<view class="authorMsg">
				<!-- 头像容器 -->
				<image class="avatar-box" :src="currentBlog.userAvatar || '../../static/avatar1.png'" mode=""></image>
				<!-- 作者名字 -->
				<text class="author-name">{{ currentBlog.userName }}</text>
				<!-- 关注按钮 -->
				<u-button type="error" :text="isConcerned ? '已关注' : '关注'" class="author-btn" @click="spyAuthor"></u-button>
			</view>
			<!-- 正文内容 -->
			<view class="authorContent">
				<!-- 封面图 -->
				<image :src="currentBlog.cover" mode="" class="cover-box"></image>
				<!-- 文字部分 -->
				<view class="text-part">
					<view class="text-title">{{ currentBlog.title }}</view>
					<u-parse :content="currentBlog.content" class="text-body"></u-parse>
					<view class="update-time">
						<!-- {{ $u.timeFormat(currentBlog.createdAt, 'yyyy年mm月dd日 hh时MM分ss秒') }} -->
						<text>博客创建于 {{ getDateDiff(currentBlog.createdAt) }}</text>
						<text>博客更新于{{ getDateDiff(currentBlog.updatedAt) }}</text>
					</view>
				</view>
			</view>
			<!-- 评论板块 -->
			<view class="remark-box">
				<u-line></u-line>
				<text class="total">
					<b>共 {{ currentBlog.comment_count }} 条评论</b>
				</text>
				<view class="self-remark-box">
					<u--image :src="userInfo.avatar" shape="circle" width="50px" height="50px" class="user-img"></u--image>

					<u--input
						class="ipt-style"
						placeholder="爱评论的人运气都不差喔!"
						prefixIconStyle="font-size: 22px;color: #909399"
						shape="square"
						autoHeight
						@confirm="confirm"
						v-model="self_comment"
					></u--input>
					<!-- <u--textarea
						v-model="self_comment"
						placeholder="爱评论的人运气都不差喔!"
						autoHeight
						class="ipt-style"
						prefixIconStyle="font-size: 22px;color: #909399"
						shape="square"
						confirmType="done"
					></u--textarea> -->
				</view>
				<!-- 大众评论模块 -->
				<view class="people-remark-box">
					<!-- 各人评论模块 -->
					<view class="single-person-box" v-for="item in father_current_comment">
						<u--image :src="item.userAvatar || '../../static/avatar1.png'" shape="circle" width="30px" height="30px" class="left"></u--image>
						<!-- 文字信息 -->
						<view class="middle">
							<text class="name">{{ item.userName }}</text>
							<text class="content" @click="popReplyComment(item)">{{ item.content }}</text>

							<text class="time">{{ getDateDiff(item.createdAt) }}</text>
							<!-- 回复评论模块 -->
							<!-- 写死状态的子评论列表 -->
							<!-- <view class="reply-remark-box">
								<u--image src="../../static/avatar1.png" shape="circle" width="15px" height="15px" class="left-tiny"></u--image>
								<view class="middle-tiny">
									<text class="name-tiny">浩比浩比</text>
									<text class="content-tiny">你真棒！</text>
									<text class="time-tiny">刚刚</text>
								</view>
								<view class="right-tiny">
									
									<u-icon name="heart" size="25" class="say-remark-good-tiny"></u-icon>
									
									<text class="remark-good-count-tiny">999</text>
								</view>
							</view> -->
							<!-- 动态渲染的子评论列表 -->
							<template v-for="ele in son_current_comment.filter(e => e.parentCommentId == item.id)">
								<view class="reply-remark-box" v-if="ele.beRepliedUserId">
									<!-- <view class="reply-remark-box" v-if="item.beRepliedUserId" v-for="ele in son_current_comment.filter(e => e.parentCommentId == item.id)"> -->
									<u--image :src="ele.userAvatar || '../../static/avatar1.png'" shape="circle" width="15px" height="15px" class="left-tiny"></u--image>
									<view class="middle-tiny">
										<text class="name-tiny">{{ ele.userName }}</text>
										<text class="content-tiny">{{ ele.content }}</text>
										<text class="time-tiny">{{ getDateDiff(ele.updatedAt) }}</text>
									</view>
									<view class="right-tiny">
										<!-- 此处应做点赞评论交互 -->
										<u-icon
											:name="ele.likeCount ? 'heart-fill' : 'heart'"
											:color="ele.likeCount ? 'red' : '#606266'"
											size="25"
											class="say-remark-good-tiny"
											@click="isCCgood(ele)"
										></u-icon>
										<!-- 此处子评论获取点赞人数 -->
										<text class="remark-good-count-tiny">{{ ele.likeCount }}</text>
									</view>
								</view>
							</template>
						</view>
						<!-- 评论点赞 -->
						<view class="right">
							<!-- 此处应做点赞评论交互 -->
							<u-icon
								:name="item.likeCount ? 'heart-fill' : 'heart'"
								:color="item.likeCount ? 'red' : '#606266'"
								size="25"
								class="say-remark-good"
								@click="isCCgood(item)"
							></u-icon>
							<!-- 此处为父评论获取点赞人数 -->
							<text class="remark-good-count">{{ item.likeCount }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部评论点赞栏 -->
			<view class="comment-bottom">
				<u--input class="ipt-style" placeholder="说点什么..." :disabled="true" prefixIcon="edit-pen" prefixIconStyle="font-size: 22px;color: #909399"></u--input>

				<!-- 用户交互栏 -->
				<view class="interaction">
					<!-- 点赞 -->
					<view class="saygood">
						<u-icon :name="isLikeBlog ? 'heart-fill' : 'heart'" size="28" :color="isLikeBlog ? 'red' : '#606266'" @click="isTrumbs"></u-icon>
						<!-- <u-icon name="heart-fill" size="28"></u-icon> -->
						<text>{{ currentBlog.like_count }}</text>
					</view>
					<!-- 评论 -->
					<view class="saything">
						<u-icon name="chat" size="28"></u-icon>
						<text>{{ currentBlog.comment_count }}</text>
						<!-- <u-icon name="chat-fill" size="28"></u-icon> -->
					</view>
					<!-- 阅读量 -->
					<view class="readcount">
						<u-icon name="eye" size="28"></u-icon>
						<text>{{ currentBlog.read_count }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { getAllBlogs, isLoveUser, isLoveBlog, acIdBlog, publishComment, getCurrentComment, isLoveComment } from '@/config/api.js';
// import { getDateDiff } from '@/config/changeTime.js';
export default {
	data() {
		return {
			// 当前博客的id
			currentid: 0,
			currentBlog: null,
			createdTime: null,
			time: null,
			isConcerned: false,
			isLikeBlog: false,
			isShow: false,
			self_comment: '',
			// 当前博客评论
			current_comment: null,
			replycontent: '',
			father_current_comment: null,
			currentCommentId: 0
		};
	},
	methods: {
		// 发布评论与现在间隔
		getDateDiff(post_modified) {
			// 拿到当前时间戳和发布时的时间戳，然后得出时间戳差
			var curTime = new Date();
			var postTime = new Date(post_modified);

			//部分浏览器不兼容此转换建议所以对此进行补充（指定调用自己定义的函数进行生成发布时间的时间戳）
			var timeDiff = curTime.getTime() - postTime.getTime();
			//上面一行代码可以换成以下（兼容性的解决）
			// var timeDiff = curTime.getTime() - getTs(post_modified);

			// 单位换算
			var min = 60 * 1000;
			var hour = min * 60;
			var day = hour * 24;
			var week = day * 7;
			var month = week * 4;
			var year = month * 12;

			// 计算发布时间距离当前时间的周、天、时、分
			var exceedyear = Math.floor(timeDiff / year);
			var exceedmonth = Math.floor(timeDiff / month);
			var exceedWeek = Math.floor(timeDiff / week);
			var exceedDay = Math.floor(timeDiff / day);
			var exceedHour = Math.floor(timeDiff / hour);
			var exceedMin = Math.floor(timeDiff / min);
			// 最后判断时间差到底是属于哪个区间，然后return

			if (exceedyear < 100 && exceedyear > 0) {
				return '发表于' + exceedyear + '年前';
			} else {
				if (exceedmonth < 12 && exceedmonth > 0) {
					return exceedmonth + '月前';
				} else {
					if (exceedWeek < 4 && exceedWeek > 0) {
						return exceedWeek + '星期前';
					} else {
						if (exceedDay < 7 && exceedDay > 0) {
							return exceedDay + '天前';
						} else {
							if (exceedHour < 24 && exceedHour > 0) {
								return exceedHour + '小时前';
							} else {
								if (exceedMin <= 0) {
									return '刚刚发表';
								} else {
									return exceedMin + '分钟前';
								}
							}
						}
					}
				}
			}
		},
		// 弹出回复评论框
		popReplyComment(comment) {
			this.isShow = true;
			// 想要获取当前评论的id，即父评论的id
			// console.log(comment.id);
			this.currentCommentId = comment.id;
			// 评论操作要在输入结束之后才调用
			// const publish_tiny_comment=await publishComment()
		},
		async sendSonReply(e) {
			// 想要获取当前评论的id，即父评论的id
			console.log(e.detail.value, this.currentCommentId);
			const pushSC = await publishComment(this.currentid, this.userInfo.token, e.detail.value, this.currentCommentId);
			// console.log(pushSC);
			if (pushSC.code == 200) {
				uni.showToast({
					title: '评论成功',
					duration: 2000
				});
				this.isShow = false;
				this.replycontent = '';
				this.initDetails();
			}
		},
		// 评论点赞
		async isCCgood(item) {
			// console.log('点赞机制被触发');
			const love_cc = await isLoveComment(item.id, item.blogId, this.userInfo.token);
			// console.log(item);
			// console.log(love_cc);
			if (love_cc.code == 200) {
				this.initDetails();
				uni.showToast({
					title: '操作成功',
					duration: 2000
				});
			} else {
				uni.showToast({
					title: '操作失败，请稍后再试',
					duration: 2000,
					// 此处的icon失效
					icon: 'fail'
				});
			}
		},

		// 用户评论框
		async confirm(e) {
			// console.log(e);
			const res = await publishComment(this.currentid, this.userInfo.token, e);
			console.log(res);
			if (res.code === 200) {
				uni.showToast({
					title: '操作成功',
					duration: 2000
				});
				this.self_comment = '';
				this.initDetails();
			}
		},
		// 弹出层
		open() {
			console.log('open');
		},
		close() {
			this.isShow = false;
			console.log('close');
		},
		// 点赞博客
		async isTrumbs() {
			const res = await isLoveBlog(this.currentBlog.id, this.userInfo.token);
			// console.log(res);
			// 用于刷新页面
			this.initDetails();
		},
		// 点击关注
		async spyAuthor() {
			const res = await isLoveUser(this.currentBlog.userId, this.userInfo.token);
			// console.log(res);
			// 用于刷新页面
			this.initDetails();
		},
		async initDetails() {
			const testblog = await acIdBlog(this.currentid, this.userInfo.token);
			// console.log(testblog);
			this.currentBlog = testblog.data;
			// 此处用于判断当前用户是否对博客点赞
			// console.log(this.currentBlog);
			this.isLikeBlog = this.currentBlog.LikeBlogs.some(ele => ele.likeUserId == this.userInfo.id);
			// 此处用于判断用户是否关注作者
			this.isConcerned = this.currentBlog.follow.rows.some(ele => ele.followUserId == this.userInfo.id);
			// console.log(this.currentBlog.follow.rows);
			// 初始化博客评论
			const getCC = await getCurrentComment(this.currentid);
			this.current_comment = getCC.data.rows;
			// console.log(this.current_comment);
			this.father_current_comment = getCC.data.rows.filter(ele => !ele.parentCommentId);
			// console.log(this.father_current_comment);
			this.son_current_comment = getCC.data.rows.filter(ele => ele.parentCommentId);
			// console.log(this.son_current_comment);
		}
	},
	onLoad(options) {
		this.currentid = options.blogid;
		this.initDetails();
		// console.log(this.userInfo);
		// console.log(this.currentid);
	},
	computed: {
		...mapState(['userInfo'])
	}
};
</script>

<style lang="scss">
* {
	font-family: catstyle;
}
.details-body {
	width: 100vw;
	// 这里高度不应写死？
	// height: 100vh;
	background-color: lightgoldenrodyellow;
	position: relative;
	.reply-pop-box {
		width: 100%;
		height: 20vh;
	}
	.authorMsg {
		width: 100%;
		height: 14vh;
		background-color: #fff;
		padding: 2vh 3vw;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: fixed;
		z-index: 10;
		.avatar-box {
			width: 10vh;
			height: 10vh;
			background-color: #87ceeb;
			border-radius: 50%;
			overflow: hidden;
		}
		.author-name {
			line-height: 10vh;
			font-size: 6vw;
			margin-left: 2vw;
			font-weight: 600;
		}
		.author-btn {
			width: 13vh;
			height: 5vh;
			// float: right;
			font-size: 5vh;
			// transform: translateX(12vw);
			position: absolute;
			right: 3%;
			top: 34%;
		}
	}
	.authorContent {
		width: 100%;
		padding: 3vw;
		box-sizing: border-box;
		padding-top: 14vh;
		// height: 80vh;
		// background-color: pink;
		.cover-box {
			width: 100%;
			height: 39vh;
		}
		.text-part {
			width: 100%;
			.text-title {
				font-size: 10vw;
				font-weight: 600;
				// transform: translateX(1vw);
				text-align: center;
			}
			.text-body {
				font-size: 8vw;
			}
			.update-time {
				margin-top: 5vw;
				> text {
					display: block;
				}
			}
		}
	}
	.remark-box {
		margin-top: 2vw;
		width: 100%;
		padding: 2vw;
		box-sizing: border-box;
		// 底部导航栏上面的模块就要加上这一条
		padding-bottom: 11vh;
		> .total {
			font-size: 6vw;
			line-height: 16vw;
		}
		> .self-remark-box {
			display: flex;
			// padding: 2vw;
			> .user-img {
				margin-right: 3vw;
			}
		}
		> .people-remark-box {
			padding: 3vw 2vw;

			> .single-person-box {
				width: 100%;
				display: flex;
				margin-top: 5vw;
				justify-content: space-between;
				> .left {
					width: 10vw;
				}
				> .middle {
					width: 69vw;
					> .name {
						display: block;
						color: grey;
						font-weight: 600;
					}
					> .time {
						color: grey;
						display: block;
					}

					> .reply-remark-box {
						display: flex;
						margin-top: 2vw;
						> .middle-tiny {
							> .name-tiny {
								display: block;
								color: grey;
								font-weight: 600;
							}
							> .time-tiny {
								color: grey;
								display: block;
							}
						}
						> .right-tiny {
							width: 10vw;
							position: relative;
							right: -10vw;
							top: 0vw;
							z-index: 10;
							> .remark-good-count-tiny {
								position: absolute;
								right: 4vw;
							}
						}
					}
				}
				> .right {
					width: 10vw;
					position: relative;
					> .say-remark-good {
						// text-align: center;
						// vertical-align: middle;
					}
					> .remark-good-count {
						// text-align: center;
						// vertical-align: middle;
						position: absolute;
						right: 6vw;
						top: 6vw;
					}
				}
			}
		}
	}
	.comment-bottom {
		width: 100%;
		height: 11vh;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2vw;
		box-sizing: border-box;
		.ipt-style {
			width: 34vw !important;
			height: 5vh !important;
		}
		.interaction {
			width: 50vw;
			height: 5vh;
			// background-color: aquamarine;
			display: flex;
			justify-content: space-between;
			padding-left: 12vw;
			box-sizing: border-box;
			.saygood {
				display: flex;
				align-items: center;
			}
			.saything {
				display: flex;
				align-items: center;
			}
			.readcount {
				display: flex;
				align-items: center;
			}
		}
	}
}
</style>
